<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>大数据管理平台</title>
		<meta charset="UTF-8">
		<link href="../css/BigData.css" rel="stylesheet" type="text/css" />
		<link href="../css/index.css" rel="stylesheet" type="text/css" />
		<link href="../css/index01.css" rel="stylesheet" type="text/css" />
		<link href="../css/Security_operation.css" rel="stylesheet" type="text/css" />
		<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="data_body">
			<div class="index_nav">
				<ul style="height: 30px; margin-bottom: 0px;">
					<li class="l_left total_chose_pl  nav_active">统计分析一</li>
					<li class="l_left total_chose_pl">统计分析二</li>
					<li class="r_right total_chose_pl">统计分析三</li>
					<li class="r_right total_chose_pl">统计分析四</li>
					<li class="r_right total_chose_pl">统计分析五</li>
				</ul>
				<div class="total_chose_box">
					<div style="height: 32px;"></div>
					<span class="chose_tltle">请选择年份：</span>
					<select class="year_chose">
						<option>2017</option>
						<option>2016</option>
						<option>2015</option>
						<option>2014</option>
						<option>2013</option>
						<option>2012</option>
					</select>
					<span class="chose_tltle">请输入月份：</span>
					<input class="chose_text_in">
					<button class="chose_enter">确定</button>
				</div>
				<div class="clear"></div>
			</div>
			<div class="index_tabs">
				<div class="inner">
					<div class="data_left03">
						<div class="dataAllNo01 maginS01">
							<div class="dataAllBorder01">
								<div class="dataAllBorder02">
									<div class="data_tit3">在训班级整体情况分析</div>
									<table class="table_data01" id="classTb">
										<tr>
											<td>班级名称</td>
											<td>在训人数</td>
											<td>项目经理</td>
											<td>重点关注人数</td>
											<td>课程阶段</td>
										</tr>
									</table>
									<p class="data_chart01" id="zhanbi02"></p>
								</div>
							</div>
						</div>
					</div>
						<!--style="margin-top: 6.3%"-->
						<div class="dataAllNo01">
							<div class="dataAllBorder01">
								<div class="dataAllBorder02">
									<div class="data_tit3">各班级作业情况分析</div>
									<table class="table_data02">
										<tr>
											<td class="font07">完成率</td>
											<td class="font03" id="competeRate">80%</td>
											<td class="font07">提交率</td>
											<td class="font02" id="submitRate">50%</td>
										</tr>
										<tr>
											<td class="font07">完成率低于40%占比</td>
											<td class="font01" id="low40"></td>
											<td class="font07" >完成率高于80%占比</td>
											<td class="font01" id="better80"></td>
										</tr>
									</table>
									<p class="zhanleft02" id="allAly03"></p>
									<table class="table_data_ex" id="list">
										<caption class="font04">本周核心作业完成率低于40%学员列表</caption>

									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="data_left03">
						<div class="dataAllNo01 maginS01">
							<div class="dataAllBorder01">
								<div class="dataAllBorder02">
									<div class="data_tit3">各班级考核情况分析</div>			
										<table class="table_data02">
											<tr>
												<td class="font07">本周总成绩</td>
												<td class="font03" id="sum_score">100</td>
												<td class="font07">平均成绩</td>
												<td class="font02" id="avg_score">56</td>
											</tr>
										</table>
										<!--班级平均成绩图表-->
										<div id="allAly04" style="width: 90%; height: 45%;margin-top: 10px;"></div>
										<!--A/B/C/D类学员图表-->
										<div id="allAly05" style="width: 90%; height: 45%;margin-top: 10px;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>
<script src="../js/echarts-all.js"></script>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
	//发送异步请求，获取班级信息列表
	$(function(){
		$.ajax({
			url:"/manager/analysis/listClssesInfo",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				console.log(data);
				if(data != null){
					$.each(data,function (index,item) {
						$("#classTb").append("<tr>" +
								"<td>"+item.f_classname+"</td>" +
								"<td>"+item.f_remainum+"</td>" +
								"<td>"+item.f_mastername+"</td>" +
								"<td>"+(item.num == undefined ? 0 : item.num)+"</td>" +
								"<td>"+item.f_progress+"</td>" +
								"</tr>");
					});
				}
			}
		});
	});
	//本周核心作业完成率低于40%学员列表
	$(function(){
		$.ajax({
			url:"/manager/analysis/findClassesCoreTaskFourtyPresentRate",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				var keys=Object.keys(data);
				console.log(data);
				if(data != null){
					$("#low40").html((data[keys[0]] == undefined ? 0 : data[keys[0]]))
				};
			}
		});
	})
	//当周所有班级学员核心作业完成率大于80%占比
	$(function(){
		$.ajax({
			url:"/manager/analysis/findClassesCoreTaskEigtyPresentRate",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				var keys=Object.keys(data);
				console.log(data);
				if(data != null){
					$("#better80").html((data[keys[0]] == undefined ? 0 : data[keys[0]]))
				};
			}
		});
	})
	$(function(){
		$.ajax({
			url:"/manager/analysis/listOfFourtyPresentStudentInfo",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				console.log(data);
				if(data != null){
					$.each(data,function (index,item) {
						$("#list").append("<tr>" +
								"<td>"+item.f_name+"</td>" +
								"<td>"+item.f_classname+"</td>" +
								"<td>"+item.f_core+"</td>" +
								"<td>"+item.f_progress+"</td>" +
								"<td>"+item.f_suggestion+"</td>" +
								"</tr>");
					});
				}
			}
		});
	});
	//---------------------------------------------//发送异步请求，本周核心作业完成率低于40%学员列表--------------------------------

	//---------------------------------------------//发送异步请求，本周核心作业完成率低于40%学员列表--------------------------------
	$(function() {
		var myChart = echarts.init($("#zhanbi02")[0]);
		var option = {
			title: {
				text: '本周每天核心作业提交率',
				textStyle:{
					color: "white",
					fontWeight: "bold",
				}
			},
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
				axisLabel: {
					textStyle: {
						color: '#F8F8FF',
					},
				},
			},
			yAxis: {
				axisLabel: {
					textStyle: {
						color: '#F8F8FF',
					},
				},
				type: 'value'
			},
			series: [{
				data: [150, 230, 224, 218, 135],
				type: 'line'
			}]
		}
		myChart.setOption(option);
		$.ajax({url:"/manager/analysis/avgCompeteRateOfDay",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				console.log(data);
				var arr = [];
				var arr1 =[];
				//循环遍历服务器返回的数组对象
				for(var i = 0; i < data.length; i++){
					//获取每一个数组元素
					var  obj = data[i];
					//获取obj对象的属性值
					var classname = obj.days;
					var num2 = obj.Complete_rate;
					arr[i] = classname;
					arr1[i] = num2;
				}
					console.log(arr);
					myChart.setOption({
				        xAxis:[{
							data:arr
						}],
						series:[{
							data:arr1
						}]
					})
				},
				error:function () {
			alert("异步交互失败")
		}
		})
	});
	$(function() {
		var myChart = echarts.init($("#allAly03")[0]);
		option = {
			title: {
				text: '本周核心作业提交率和完成率统计',
				textStyle: {
					color: "#e9ebee"

				},
				x: 'center'

			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
				  type: "shadow"
				}
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data:['提交率',"完成率"],
				textStyle: {
					color: "#e9ebee"

				},
			},
			calculable: false,
			xAxis: [{
				type: 'category',
				splitLine: {
					show: false
				},
				axisLabel: {
					formatter: '{value} ',
					textStyle: {
						color: '#a4a7ab',
						align: 'right'
					}
				},
				 data: ["java293","java294","java295","java296","java297","java298"]
			}],
			yAxis: [{
				type: 'value',
				splitLine: {
					show: false
				},
				axisLabel: {
					interval: 'auto',
					formatter: '{value} %',  
					textStyle: {
						color: '#a4a7ab',
						align: 'right'
					}
				}
			}],
			grid: {
				borderWidth: 0
			},
			series: [{
					name: '完成率',
					type: 'bar',
					data: [50, 20, 40, 87, 75, 67],
					itemStyle: {
						normal: {
							color: '#2481ff'
						}
					},
					markPoint: {
						data: [{
								type: 'max',
								name: '最大值'
							},
							{
								type: 'min',
								name: '最小值'
							}
						]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					}
				},
				{
					name: '提交率',
					type: 'bar',
					 data: [80, 75, 90, 100, 60, 88],
					itemStyle: {
						normal: {
							color: '#1afffd'
						}
					},
					markPoint: {
						data: [{
								type: 'max',
								name: '最大值'
							},
							{
								type: 'min',
								name: '最小值'
							}
						]
					},
					markLine: {
						data: [{
							type: 'average',
							name: '平均值'
						}]
					}
				}
			]
		};
		myChart.setOption(option);
		//发送异步请求，获取当前在训班级的平均成绩
		$.ajax({
			type:"get", //向后台发送请求的方式
			url:"/manager/analysis/allClassCoreTaskComRateAndSubRate", //向后台请求的url地址
			dataType:"json", //服务器返回的数据类型
			success:function(data){
				//异步交互成功的回调函数，data就是后台返回的json数据
				console.log(data);
				//声明数组
				var arr = [];
				var arr1 =[];
				var arr2 =[];
				//循环遍历服务器返回的数组对象
				for(var i = 0; i < data.length; i++){
					//获取每一个数组元素
					var  obj = data[i];
					//获取obj对象的属性值
					var classname = obj.f_classname;
					var num2 = obj.num2;
					var num3 = obj.num4;
					//target.name = classname;
					// target.num2 = num2;
					arr[i] = classname;
					arr1[i] = num2;
					arr2[i] = num3;
				}
				//console.log(arr);
				myChart.setOption({
					xAxis: [{
						data : arr
					}],
					series: [{
						name: '完成率',
						type: 'bar',
						data: arr1
					},
						{
							name: '提交率',
							type: 'bar',
							data : arr2
						}]

				});
			},
			error:function(){
				alert("异步交互失败~");
			}
		});
	});
	//异步更新本周总成绩和平均成绩
	$(function(){
		$.ajax({
			url:"/manager/analysis/findAllClassesSumScoreAndAvgScore",
			type:"get",
			dataType:"json",
			success:function (data) {
				//局部刷新表格数据
				console.log(data);
				var keys=Object.keys(data);
				console.log(data[keys[0]]);
				console.log(data[keys[1]]);
				if(data != null){
					$("#sum_score").html((data[keys[0]] == undefined ? 0 : data[keys[0]]));
					$("#avg_score").html((data[keys[1]] == undefined ? 0 : data[keys[1]]))
				}
			},
			error:function () {
				alert("异步交互失败")
			}
		});
	});
	//各班级平均成绩
	$(function(){
		var myChart = echarts.init($("#allAly04")[0]);
		option = {
			title: {
				text: '本周各班级平均成绩',
				left: 'center',
				textStyle:{
					color: "white",
					fontWeight: "bold",
				}
			},
			tooltip: {
				trigger: 'item'
			},
			series: [
				{
					name: '平均成绩',
					type: 'pie',
					radius: '50%',
					data: [
						{value: 80, name: 'java297'},
						{value: 75, name: 'java230'},
						{value: 35.4, name: '大数据'},
						{value: 86, name: 'java299'},
						{value: 90, name: 'java289'}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		myChart.setOption(option);
		$.ajax({
			type:"get",
			url:"/manager/analysis/listClassesAvgScore",
			dataType:"json",
			success:function (data) {
				console.log(data);
				var arr=[];
				for (var i=0;i<data.length;i++){
					var obj=data[i];
					var classname= obj.f_classname;
					var avg_score= obj.score_avg;
					var target={};
					target.name=classname;
					target.value=avg_score;
					arr[i]=target
				}
				console.log(arr);
				myChart.setOption({
					series:[{
						data:arr
					}]
				})
			},
			error:function () {
				alert("异步交互失败")
			}
		});
	});
	//A/B/C/D类学员图表
	$(function(){
		var myChart = echarts.init($("#allAly05")[0]);
		option = {
			title: {
				text: '学员等级',
				textStyle:{
					color: "white",
					fontWeight: "bold",
				}
			},
			tooltip: {
				trigger: 'item'
			},
			toolbox: {
				feature: {
					dataView: {readOnly: false},
					restore: {},
					saveAsImage: {}
				}
			},
			legend: {
				data: ['A类','B类','C类','D类','E类']
			},
			
			series: [
				{
					name:'学员等级',
					type:'funnel',
					left: '5%',
					top: 60,
					bottom: 60,
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort: 'descending',
					gap: 2,
					label: {
						show: true,
						position: 'inside'
					},
					labelLine: {
						length: 10,
						lineStyle: {
							width: 1,
							type: 'solid'
						}
					},
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1
					},
					emphasis: {
						label: {
							fontSize: 20
						}
					},
					data: [
						{value: 60, name: 'E类'},
						{value: 40, name: 'D类'},
						{value: 20, name: 'C类'},
						{value: 80, name: 'B类'},
						{value: 100, name: 'A类'}
					]
				}
			]
		};
		myChart.setOption(option);
		$.ajax({
			type:"get",
			url:"/manager/analysis/scoreClassification",
			dataType:"json",
			success:function (data) {
				console.log(data)
				var arr = [];
				var keys=Object.keys(data);
				for (var i = 0; i < keys.length; i++) {
					var target={};
					target.name=keys[i];
					target.value=data[keys[i]];
					arr[i]=target;
				}
				console.log(arr);
				myChart.setOption({
					series:[{
						data:arr
					}]
				})
			},
			error:function () {
				alert("异步交互失败")
			}
		})
	});
</script>
